<template>
    <div class="wrap">
        <!-- <van-notice-bar scrollable color="#1989fa" background="#ecf9ff" left-icon="info-o">
           当前好友相机权限：{{messaget}}
        </van-notice-bar> -->
         <van-nav-bar @click-left="onClickLeft" left-arrow left-text="返回" title="">
       
    </van-nav-bar>
        <van-form @submit="onSubmit">
           
           
          
            <van-field   name="uploader" label="头像上传">
                <template #input>
                    <van-uploader :max-count="1" :after-read="onReadd" v-model="uploader1" />
                </template>
            </van-field>
                <van-field
                    v-model="form.name"
                    name="name"
                    label="姓名"
                    placeholder="请填写姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]"
                />
                
               
                <van-field
                    v-model="form.idCard"
                    name="idCard"
                    label="身份证"
                    placeholder="请填写身份证"
                    :rules="[{ required: true, message: '请填写身份证' }]"
                />
               
           
           <van-field
                v-model="form.phone"
                name="phone"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field

                name="village"
                label="小区"
                readonly
                @click="villagePicker=true"
                :value="village"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择小区' }]"
            />
            <van-field
                name="owner"
                label="与屋主关系"
                readonly
                @click="ownerPicker=true"
                :value="ownerRelations"
                placeholder="点击选择"
                :rules="[{ required: true, message: '请选择与屋主关系' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                提交
                </van-button>
            </div>
        </van-form>
         <div style="margin: 16px;">
                <van-button round block type="danger" @click="del">
                删除
                </van-button>
            </div>
            <div class="info-t">
                <span class="left">
小区信息
                </span>
                <span @click="showleft=true" class="right">
                    新增
                </span>
            </div>
        <van-popup v-model="villagePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="villageList"
                @confirm="villageConfirm"
                @cancel="villagePicker = false"
            />
        </van-popup> 
         <van-popup v-model="ownerPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="ownerList"
                @confirm="ownerConfirm"
                @cancel="ownerPicker = false"
            />
        </van-popup>
        <van-popup v-model="showleft" position="left" :style="{ width:'70%',fontSize:'10px', height: '100%' }" > 
             <van-radio-group style="padding-left:10px"  v-model="radio">
                <van-radio style="margin-top:6px" :key="index" v-for="(item,index) in community" :name="item.id" icon-size="24px">{{item.communityName}}({{item.houseNo}})</van-radio>
                
            </van-radio-group>
            <van-button @click="sureye" style="position:absolute;bottom:0;" block type="primary">确定选择</van-button>
            
        </van-popup> 


       <div :key="index" v-for="(item,index) in hlist" class="list-card">
           <div class="left">{{item.communityName}}({{item.houseNo}})</div>
           <div class="right">
               <van-button @click="delhouse(item)" type="danger" size="mini">删除</van-button>
           </div>
       </div>
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/myfriends.js'
import api2 from '../api/myvillage.js'
    export default {
        data: function () {
            return {
                   ownerList:[{
                    type:0,
                    text:"房主"  
                },{
                    type:1,
                    text:"配偶"  
                },{
                    type:2,
                    text:"子"  
                },{
                    type:3,
                    text:"女"  
                },{
                    type:4,
                    text:"孙子、孙女，或外孙子、外孙女"  
                },{
                    type:5,
                    text:"父母"  
                },{
                    type:6,
                    text:"祖父母或外祖父母"  
                },{
                    type:7,
                    text:"兄、弟、姐、妹"  
                },{
                    type:8,
                    text:"其他亲属"  
                },{
                    type:9,
                    text:"女婿"  
                },{
                    type:99,
                    text:"儿媳"  
                },{
                    type:99,
                    text:"租客"  
                }],
                ownerRelations:'',
                ownerPicker:false,
                radio:'',
                showleft:false,
                messaget:'',
                village:'',
                uploader:[],
                uploader1:[],
                uploader2:[],
                n_place:'',
                danPicker:false,
                fileList:[],
                fileList1:[],
                fileList2:[],
                brandPicker:false,
                bcolorPicker:false,
                ccolorPicker:false,
                ctypePicker:false,
                rightsPicker:false,
                villagePicker:false,
                onlinePicker:false,
                binPicker:false,
                zongPicker:false,
                mianPicker:false,
               hlist:[],
               
               
                    
              
                villageList:[],
              community:[],
               
            
                hunPicker:false,
                jiaoyuPicker:false,
                showCalendar:false,
                village:'',
                nowdata:null,
                form:{
                    activationCode:'',
                    "openId": "",
                    "name": "",
                    "communityId": "",
                    "pictureId": "",
                    "idCard": "",
                    "phone": "",
                    "sex": "",
                    "age": '',
                    "building": "",
                    "room": ""
                }
            }
        },
        components: {
           
        },
        created(){
           
            this.getVillage()
            this.getCommunity()
            this.friendhouselist()
        },
        mounted() {
           
        },
        methods: {
            onClickLeft() {
               this.$router.go(-1)
            },
            ownerConfirm(val){
                this.ownerRelations=val.text
                this.form.ownerRelation=val.type
                this.ownerPicker=false
            },
            friendhouselist(){
                let that=this
                api.friendhouselist(that.$route.query.code).then(e=>{
                   
                    if(e.code==200){
                       that.hlist=e.data
                        
                       
                    }
                }).catch(err=>{
                    Toast.clear()
                     console.log(err.response)
                })
            },
            sureye(){
                let that=this
                if(!this.radio){
                    Toast('请选择房屋信息');
                    return;
                }
                for(let i=0;i<this.community.length;i++){
                    if(this.radio===this.community[i].id){
                        this.nowdata=this.community[i]
                    }
                }
                Toast.loading({
                    duration:0,
                    message: '正在采集信息',
                    forbidClick: true,
                });
                let obj={
                    friendId:this.$route.query.code,
                    communityId:this.nowdata.communityId,
                    buildingId:this.nowdata.buildingId,
                    houseId:this.nowdata.houseId
                }
                api.addHouse(obj).then(e=>{
                     
                    Toast.clear()
                    if(e.code==200){
                      
                         that.friendhouselist()
                       
                    }
                }).catch(err=>{
                    Toast.clear()
                     console.log(err.response)
                })
                this.showleft=false
            },
            getCommunity(){
                let that=this
                api2.getCommunity().then(e=>{
                    if(e.code==200){
                       
                        that.community=e.data
                       
                    }
                }).catch(err=>{
                     console.log(err.response)
                })
                
            },
            getInfo(){
                let that=this
                api.getInfo({id:that.$route.query.code}).then(e=>{
                    if(e.code==200){
                        console.log('&&&&&&&&&&&&&&&&')
                        console.log(e.data)
                        let obb=that.ownerList.filter(item=>{
                            return item.type==e.data.ownerRelation
                        })
                       
                         that.ownerRelations=obb[0].text
                that.form.ownerRelation=obb[0].type
                        that.form=e.data
                        
                        switch(Number(e.data.userPermission)){
                            case 0:
                                that.messaget='未知'
                                break;
                            case 1:
                                that.messaget='不允许,请上传清晰照'
                                break;
                            case 2:
                                that.messaget='允许'
                                break;
                            case 3:
                                that.messaget='失败'
                                break;
                        }
                        let obj={
                            url:e.data.pictureUrlList[0].url
                        }
                        that.uploader1.push(obj)
                        for(let i=0;i<that.villageList.length;i++){
                           
                            if(e.data.communityId===that.villageList[i].id){
                                that.village=that.villageList[i].name
                            }
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            getVillage(){
               let that=this 
               api.getVillage().then(e=>{
                   if(e.code==200){
                        that.villageList=e.data.map(item=>{
                            item.text=item.name
                            return item
                        })
                   }
                    that.getInfo()
                  
               }).catch(err=>{
                   console.log(err)
               })
            },
            onRead: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '识别中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               
                axios.post(zhengmianUrl, formData, config).then(res => {
                   
                    if(res.data.code===100){
                       
                        Toast.clear()
                        if(res.data.result.result.statusCode==400){
                            Notify({ type: 'warning', message: '身份识别不全' });
                        }else{
                            let obj=res.data.result.result
                            that.form.name=obj.name
                            that.form.mingzu=obj.ethnicity
                            that.form.birth=obj.birth
                            that.form.sex=obj.sex=='男'?1:2
                            that.form.sexs=obj.sex
                            that.form.id_card=obj.number
                            that.form.address=obj.address
                            
                            that.form.forward_url=res.data.url
                           
                            switch(Number(obj.userPermission)){
                                case 0:
                                    that.messaget='未知'
                                    break;
                                case 1:
                                    that.messaget='不允许,请上传清晰照'
                                    break;
                                case 2:
                                    that.messaget='允许'
                                    break;
                                case 3:
                                    that.messaget='失败'
                                    break;
                            }
                            Notify({ type: 'success', message: '身份识别正确' });
                        }
                        
                        
                    }else{
                       Notify({ type: 'warning', message: '识别失败' });
                    }
                });
            },
            onReadd: function(file) {
                let that = this;
                Toast.loading({
                    duration:0,
                    message: '上传中...',
                    forbidClick: true,
                });
                let formData = new FormData();
               
               if(file.length){
                    for(let i=0;i<file.length;i++){
                        formData.append('files', file[0].file);
                    }
               }else{
                  formData.append('file', file.file); 
               }
               
                let config = {
                    headers: {
                        Authorization,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
               
                axios.post(BASE+`/picture/uploadImg/${that.form.pictureId}`, formData, config).then(res => {
                    if(res.data.code===200){
                       
                    Toast.clear()
                       Notify({ type: 'success', message: '上传成功' });
                        that.form.pictureId=res.data.data.id
                        
                    }else{
                       Notify({ type: 'warning', message: '上传失败' });
                    }
                }).catch(err=>{
                    Toast.clear()
                    that.uploader1=[]
                    Notify({ type: 'warning', message: '上传失败' });
                    console.log(err)
                });
            },


            villageConfirm(val){
                this.form.communityId=val.id
                this.village=val.text
                this.villagePicker=false
            },
            delhouse(val){
                 let that=this
               
                Dialog.confirm({
                    title: '确认删除？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '',
                        forbidClick: true,
                    });
                    api.delhouse({id:val.id,friendId:that.$route.query.code}).then(e=>{
                        Toast.clear()
                        if(e.code===200){
                         that.friendhouselist()
                            Notify({ type: 'success', message: '删除成功' });
                        }
                    }).catch(err=>{
                        console.log()
                    })
                })
                .catch((err) => {
                    console.log(err)
                });
            },
            del(){
               let that=this
               
                Dialog.confirm({
                    title: '确认删除？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '',
                        forbidClick: true,
                    });
                    api.del({id:that.$route.query.code}).then(e=>{
                        Toast.clear()
                        if(e.code===200){
                          that.$router.push('/myfriends')
                            Notify({ type: 'success', message: '删除成功' });
                        }
                    }).catch(err=>{
                        console.log()
                    })
                })
                .catch((err) => {
                    console.log(err)
                }); 
            },
           onSubmit(val){
               let that=this
               var  re = /^1\d{10}$/    //正则表达式
                
                if (re.test(this.form.phone)) {      //判断字符是否是11位数字
                   
                }
                else {
                    Toast('请输入正确手机号')
                   return
                }
                if (this.form.idCard.length==18) {      //判断字符是否是11位数字
                   
                }
                else {
                    Toast('请输入正确身份证')
                   return
                }
                that.form.openId=openid
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '系统正在采集信息',
                        forbidClick: true,
                    });
                    api.add(that.form).then(e=>{
                        Toast.clear()
                        if(e.code===200){
                           
                             that.$router.push('/myfriends')
                            Notify({ type: 'success', message: '信息已更新' });
                        }
                    }).catch(err=>{
                        console.log()
                    })
                })
                .catch((err) => {
                    console.log(err)
                });
               
           }
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
  .info-t{
      color:blue;
      font-size:10px;
      padding:20px;
      display:flex;
      justify-content: space-between;
  }
   .info-t .right{
      color:blue;
      font-size:10px;
      
  }
  .list-card{
     
      width:90%;
        font-size:10px;
        display: flex;
        height:60px;
        justify-content: space-between;
        align-items: center;
        padding:0 30px;
        box-sizing: border-box;
      margin:10px auto;
      background:#fff;
      box-shadow: 2px 2px 2px 2px #ccc;
  }

</style>
